<template>
  <el-row :gutter="24">
    <el-col class="m-col" :span="5">
      <el-menu
        :default-active="activedMenu($route.path)"
        @select="handleSelect"
        style="height: 580px"
      >
        <el-menu-item index="1">
          <span>系统通知</span>
        </el-menu-item>
        <!--<el-menu-item index="2">
                    <span slot="title">点赞回复</span>
        </el-menu-item>-->
        <el-menu-item index="3">
          <span>私信</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="19">
      <router-view></router-view>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    activedMenu(val) {
      switch (val) {
        case "/mine/message/system":
          return "1";
        case "/mine/message/user":
          return "3";
      }
    },
    handleSelect(key) {
      switch (key) {
        case "1":
          this.$router.push({ name: "systemMsg" });
          break;
        case "2":
          this.$message("此功能开发中");
          break;
        case "3":
          this.$router.push({ name: "userMsg" });
          break;
      }
    },
  },
  created() {
  },
};
</script>

<style>
.m-col {
  height: 600px;
}
</style>